<template>
  <div id="app">
    <div
      id="main"
      style="width: 600px; height: 400px"
      :option="drawChart"
    ></div>

    <a-tabs default-active-key="1">
      <a-tab-pane :key="value" :tab="key" v-for="(value, key) in dataSource">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="buy">
            <p>price:{{value}}</p>

            <a-form-item label="amount" v-bind="formlayout">
              <a-input
                v-model="num"
                placeholder="请输入数量"
                id="num"
              ></a-input>
            </a-form-item>
            <a-button type="primary" @click="buy(key, value)">买入</a-button>
          </a-tab-pane>

          <a-tab-pane key="2" tab="sell">
                        <p>price:{{value}}</p>


            <a-form-item label="amount" v-bind="formlayout">
              <a-input
                v-model="num"
                placeholder="请输入数量"
                id="num"
              ></a-input>
              <a-button type="primary" @click="sell(key, value)">卖出</a-button>
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script >
import echarts from "echarts";
import { sell,buy } from "./axios_http/api";
export default {
  name: "app",
  data() {
    return {
      uid: localStorage.getItem("uid"),
      time: [],
      Switzerland: [],
      Singapore: [],
      Japaense: [],
      English: [],
      Canada: [],
      Europe: [],
      USA: [],
      Australia: [],
      NewZealand: [],
      HongKong: [],
      currency: [
        "法郎",
        "新加披元",
        "日元",
        "英镑",
        "加币",
        "欧元",
        "美元",
        "澳元",
        "新西兰币",
        "港币",
      ],
      dataSource: [],
      price: null,
      num: null,
      formlayout: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        buttonlayout: {
          // 按钮
          wrapperCol: {
            xs: { span: 24, offset: 0 },
            sm: { span: 16, offset: 8 },
          },
        },
      },
    };
  },

  methods: {
    buy(name, price) {
      console.log(name, price);
      var data ={
        "num": this.num,
        "price": price,
        "name": name,
        "uid": this.uid,
      }
      buy(data).then((resp) => {
        console.log(resp)
      })
      // console.log(currency, this.num, this.price);
    },
    sell(name, price) {
      console.log(name, num);
      var data ={
        "num": this.num,
        "name": name,
        "uid": this.uid,
      }
      sell(data).then((resp) => {
        console.log(resp)
      })
    },
    drawChart() {
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "",
        },
        tooltip: {},
        legend: {
          data: [
            "Switzerland",
            "Singapore",
            "Japaense",
            "English",
            "Canada",
            "Europe",
            "USA",
            "Australia",
            "NewZealand",
            "HongKong",
          ],
        },
        grid: {
          left: "30%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          data: this.time,
          boundaryGap: false,
        },
        yAxis: {},
        series: [
          {
            name: "Switzerland",
            type: "line",
            data: this.Switzerland,
          },
          {
            name: "Singapore",
            type: "line",
            data: this.Singapore,
          },
          {
            name: "Japaense",
            type: "line",
            data: this.Japaense,
          },
          {
            name: "English",
            type: "line",
            data: this.English,
          },
          {
            name: "Canada",
            type: "line",
            data: this.Canada,
          },
          {
            name: "Europe",
            type: "line",
            data: this.Europe,
          },
          {
            name: "USA",
            type: "line",
            data: this.USA,
          },
          {
            name: "Australia",
            type: "line",
            data: this.Australia,
          },
          {
            name: "NewZealand",
            type: "line",
            data: this.NewZealand,
          },
          {
            name: "HongKong",
            type: "line",
            data: this.HongKong,
          },
        ],
      };

      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("main"));
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    initwebsocket: function () {
      //判断浏览器是否支持websocket
      if ("WebSocket" in window) {
        //生成websocket连接
        var ws = new WebSocket("ws://192.168.1.65:8000/myapp/exchange/");

        //发送链接请求
        ws.onopen = function () {
          ws.send(localStorage.getItem("uid"));
          console.log("连接成功");
        };
        //发送消息
        ws.onmessage = (evt) => {
          //将获取信息打印
          var data_json = JSON.parse(evt.data);
          console.log(data_json);
          this.Switzerland.push(data_json.Switzerland);
          this.Singapore.push(data_json.Singapore);
          this.Japaense.push(data_json.Japaense);
          this.English.push(data_json.English);
          this.Canada.push(data_json.Canada);
          this.Europe.push(data_json.Europe);
          this.USA.push(data_json.USA);
          this.Australia.push(data_json.Australia);
          this.NewZealand.push(data_json.NewZealand);
          this.HongKong.push(data_json.HongKong);
          this.time.push(data_json.time);
          this.dataSource = data_json;
        };
        //捕获断开连接
        ws.onclose = (evt) => {
          var sum = 0;
          console.log(evt);
          // this.initwebsocket()
          console.log("断线重连中");
        };
      }
    },
  },
  watch: {
    time: function () {
      console.log(this.time);
      this.drawChart();
    },
  },
  mounted() {
    console.log();
    this.initwebsocket();
    this.drawChart();
  },
};
</script>

<style></style>